<template>
	<view class="template-detail">
		<view class="template-title" @click="handleToggleProjectType">
			<text class="template-title-text">{{ projectTypeValue }}</text>
			<van-icon class="right-arrow-icon" name="arrow-down" />
		</view>
		<view class="template-swiper-content">
			<uni-load-more class="loading-class" iconType="auto" v-if="projectLoading" status="loading"
				color="#999999" />

			<uni-swiper-dot v-else class="uni-swiper-dot-box" @clickItem="clickItem" :info="info" :current="current"
				:mode="mode" :dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" :style="{'height': windowHeight + 'px'}" @change="change"
					:current="swiperDotIndex">
					<swiper-item v-for="(item, index) in currentProjectList.detail" :key="index">
						<view class="swiper-item" :style="{'height': (windowHeight - 30) + 'px'}">
							<view class="template-swiper-detail-list">
								<view class="template-detail-item-title">
									<view class="template-detail-item-title-text">
										<text>{{ item[0].class }}</text>
										<text style="margin-left: 5px; color: #999;">({{ item.length }})</text>
									</view>
									<view class="edit-icon-box" @click.stop="handleEditClassName(item)">
										<van-icon class="edit-icon" name="ellipsis" />
									</view>
								</view>
								<view class="template-detail-item-list"
									:style="{'max-height': (windowHeight - 71) + 'px'}">
									<view class="template-detail-item" v-for="(dItem, dIndex) in item" :key="dIndex"
										@click="handleEditTemplateDetail(dItem)">
										<view class="template-detail-item-content-icon">
											<van-icon class="item-title-icon" name="label" />
										</view>
										<view class="template-detail-item-content-right">
											<view class="item-title">{{ dItem.items }}</view>
											<view class="item-bottom-box">
												<view class="item-standard">{{ dItem.standard }}</view>
												<view class="item-period">{{ dItem.frequency }}</view>
												<view class="item-tally-person">{{ dItem.inspectPost }}</view>
											</view>
										</view>
									</view>

									<view class="template-detail-item"
										@click.stop.prevent="handleCreateStandard(item[0].class)">
										<view class="template-detail-item-content-icon">
											<van-icon class="template-detail-item-add" name="plus" />
										</view>
										<view class="template-detail-item-content-right">
											<view class="template-detail-item-add-text">点击添加工作项</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>

					<swiper-item>
						<view class="swiper-item">
							<view class="create-new-detail" @click.stop.prevent="handleCreateStandard('')">
								<van-icon class="create-new-detail-add-icon" name="plus" />
								<text>点击添加工作项</text>
							</view>
						</view>

					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 切换项目类别popup -->
		<van-popup :show="projectTypePopShow" position="bottom">
			<van-picker show-toolbar :columns="projectTypeList" @confirm="onProjectTypeConfirm"
				@cancel="projectTypePopShow = false" />
		</van-popup>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				windowHeight: 0,
				swiperDotIndex: 0,
				mode: 'round',
				current: 0,
				info: [],
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255, .3)',
					border: '1px rgba(255, 255, 255, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 255, 255, .9)',
					selectedBorder: '1px rgba(255, 255, 255, .9) solid'
				},
				projectTypeValue: "",
				projectTypeIdValue: "",
				projectTypePopShow: false,
				projectTypeList: [],
				projectTypeIdList: [],
				projectInfo: {},
				projectList: [],
				currentProjectList: [],
				projectLoading: false,
			}
		},
		onShow() {
			const projectInfo = uni.getStorageSync("projectInfo");
			if (projectInfo) {
				this.projectInfo = projectInfo;
				this.projectTypeValue = projectInfo.name;
				this.projectTypeIdValue = projectInfo.id;
			}
			this.handleGetProjectDetail();
			this.handleGetProjectList();
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log('屏幕信息', res);
					this.windowHeight = res.windowHeight - 75;
				}
			})
			this.projectLoading = true;
			this.handleGetProjectDetail();
			this.handleGetProjectList();
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			handleToggleProjectType() {
				this.projectTypePopShow = true;
			},
			onProjectTypeConfirm(value) {
				console.log(value);
				this.projectTypeValue = value.detail.value;
				this.projectTypeIdValue = this.projectTypeIdList[value.detail.index];
				var that = this;
				getApp().showLoading();
				apiRqs._getProjectDetail(this.projectTypeIdList[value.detail.index]).then((res) => {
					uni.hideLoading();
					that.projectTypePopShow = false;
					console.log('变更后的项目详情', res);
					if (res.code == 200) {
						that.currentProjectList = res.data;
						uni.setStorageSync("projectInfo", res.data);
						that.projectTypeValue = res.data.name;
						let length = res.data.detail.length;
						let infoObj = [];
						for (let i = 0; i <= length; i++) {
							infoObj.push({});
						}
						that.info = infoObj;
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					uni.hideLoading();
					console.log('err', err)
					getApp().showToast(res.msg, "fail");
				})
			},
			handleCreateStandard(level) {
				let projectClassifyName = '';
				if (level) {
					projectClassifyName = level;
				}
				uni.navigateTo({
					url: '/packageB/template/create-standard?className=' + projectClassifyName
				})
			},
			handleCreateNewDetail() {
				uni.navigateTo({
					url: '/packageB/template/create-detail'
				})
			},
			handleEditTemplateDetail(item) {
				uni.setStorageSync("itemsInfo", item);
				uni.navigateTo({
					url: '/packageB/template/edit-standard'
				})
			},
			// 获取项目内容
			handleGetProjectDetail() {
				let id = uni.getStorageSync("projectInfo").id;
				var that = this;
				
				apiRqs._getProjectDetail(id).then((res) => {
					that.projectLoading = false;
					console.log('项目详情', res);
					if (res.code == 200) {
						that.currentProjectList = res.data;
						that.projectTypeValue = res.data.name;
						let length = res.data.detail.length;
						let infoObj = [];
						for (let i = 0; i <= length; i++) {
							infoObj.push({});
						}
						that.info = infoObj;
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					that.projectLoading = false;
					console.log('err', err)
					getApp().showToast(res.msg, "fail");
				})
			},
			// 获取项目列表
			handleGetProjectList() {
				var that = this;
				apiRqs._getShopTemplateList({
					"pageSize": 999,
					"pageIndex": 1,
					"orderBy": ""
				}).then((res) => {
					console.log('res', res);
					if (res.code == 200) {
						let projectTypeList = [];
						let projectTypeIdList = [];
						let data = res.data.data;
						that.projectList = res.data.data;
						for (let i = 0; i < data.length; i++) {
							projectTypeList.push(data[i].name);
							projectTypeIdList.push(data[i].id);
						}
						that.projectTypeList = projectTypeList;
						that.projectTypeIdList = projectTypeIdList;
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			handleEditClassName(item) {
				console.log(item);
				var that = this;
				uni.showActionSheet({
					itemList: ['重命名', '删除'],
					success(res) {
						if (res.tapIndex == 0) {
							uni.navigateTo({
								url: "/packageB/template/edit-class?className=" + item[0].class
							})
						} else {
							var that = this;
							uni.showModal({
								title: "提示",
								content: "确认删除此项目吗？",
								confirmColor: "#008aff",
								success(res) {
									if (res.confirm) {
										getApp().showLoading();
										let idList = [];
										for (let i = 0; i < item.length; i++) {
											idList.push(item[i].id);
										}
										apiRqs._deleteTemplateItem(idList).then((res) => {
											uni.hideLoading();
											console.log('删除结果', res);
											if (res.code == 200) {
												that.handleGetProjectDetail();
												that.handleGetProjectList();
											} else {
												getApp().showToast(res.msg);
											}
										}).catch((err) => {
											console.log('err', err);
										})
									}
								}
							})
						}
					}
				})

			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #4D5D6B;
	}

	.template-detail {
		padding: 20px 0;

		.template-title {
			display: flex;
			align-items: center;
			padding: 0 20px;

			.template-title-text {
				font-size: 16px;
				color: #fff;
			}

			.right-arrow-icon {
				font-size: 16px;
				color: #fff;
				margin-left: 5px;
			}
		}

		.template-swiper-content {
			margin-top: 15px;

			.create-new-detail {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				color: #888;
				background-color: #fff;
				border-radius: 3px;
				padding: 10px 15px;
				&:active{
					background-color: #f1f1f1;
				}

				.create-new-detail-add-icon {
					margin-right: 5px;
					font-size: 15px;
				}
			}

			.swiper-item {
				padding: 0 20px;

				.template-swiper-detail-list {
					background-color: #fff;
					border-radius: 3px;

					.template-detail-item-title {
						font-size: 15px;
						font-weight: 500;
						padding: 10px;
						border-bottom: 1px solid #efefef;
						background-color: #F3F4F6;
						display: flex;
						align-items: center;
						border-top-left-radius: 3px;
						border-top-right-radius: 3px;

						.template-detail-item-title-text {
							flex: 1;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							padding-right: 15px;
						}

						.edit-icon-box {
							width: 18px;
							flex: 0 0 18px;

							.edit-icon {
								font-size: 18px;
								color: #999999;
							}
						}

					}

					.template-detail-item-list {
						display: flex;
						flex-direction: column;
						overflow-y: auto;

						.template-detail-item {
							display: flex;
							padding: 10px;
							border-bottom: 1px solid #efefef;
							box-sizing: border-box;

							&:active {
								background-color: #f1f1f1;
							}

							&:last-child {
								border-bottom: none;
							}

							.template-detail-item-content-icon {
								width: 18px;
								flex: 0 0 18px;

								.template-detail-item-add {
									font-size: 16px;
									color: #888;
								}

								.item-title-icon {
									font-size: 18px;
									color: #007aff;
								}
							}

							.template-detail-item-content-right {
								flex: 1;
								margin-left: 5px;
								margin-top: 2px;

								.item-title {
									font-size: 14px;
								}

								.template-detail-item-add-text {
									font-size: 13px;
									color: #888;
								}

								.item-bottom-box {
									display: flex;
									align-items: center;
									font-size: 12px;
									margin-top: 5px;
									color: #666666;

									.item-standard {
										flex: 1.2;
										padding-right: 10px;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
									}

									.item-period {
										flex: 0.8;
										padding-right: 10px;
									}

									.item-tally-person {
										flex: 1;
									}
								}
							}

						}

					}
				}
			}
		}

		.image {
			width: 750rpx;
		}

		/* #ifndef APP-NVUE */
		::v-deep .image img {
			-webkit-user-drag: none;
			-khtml-user-drag: none;
			-moz-user-drag: none;
			-o-user-drag: none;
			user-drag: none;
		}

		/* #endif */

		@media screen and (min-width: 500px) {
			.uni-swiper-dot-box {
				width: 400px;
				margin: 0 auto;
				margin-top: 8px;
			}

			.image {
				width: 100%;
			}
		}

		.uni-bg-red {
			background-color: #ff5a5f;
		}

		.uni-bg-green {
			background-color: #09bb07;
		}

		.uni-bg-blue {
			background-color: #007aff;
		}

		.example-body {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			padding: 20rpx;
		}

		.example-body-item {

			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 15rpx;
			padding: 15rpx;
			height: 60rpx;
			/* #ifndef APP-NVUE */
			display: flex;
			padding: 0 15rpx;
			/* #endif */
			flex: 1;
			border-color: #e5e5e5;
			border-style: solid;
			border-width: 1px;
			border-radius: 5px;
		}

		.example-body-item-text {
			font-size: 28rpx;
			color: #333;
		}

		.example-body-dots {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50px;
			background-color: #333333;
			margin-left: 10rpx;
		}

		.active {
			border-style: solid;
			border-color: #008aff;
			border-width: 1px;
		}
	}
</style>
